﻿
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getColumnInfo.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.getDom.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.operateColumn.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false,title:'注意：列“主键”无法被删除的！'">
    <div id="toolbar1" style="padding:10px;">
        <a id="a1" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除列“男”</a>
        <a id="a2" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除列“测试1”</a>
        <a id="a3" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除列“主键”</a>
        <br /><br />
        <a id="a4" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除列“测试3”并显示该列 option </a>
        <br /><br />
        <a id="a5" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">移动列“测试4”到列“女”的左边</a>
        <a id="a6" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">移动列“测试4”到列“地区”的右边</a>
        <a id="a7" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">将列“测试4”往左移动</a>
        <a id="a8" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">将列“测试4”往右移动</a>
        <br /><br />
        <a id="a9" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">冻结-列“测试4”</a>
        <a id="a10" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">解冻-列“测试4”</a>
        <a id="a11" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">尝试将列“测试5”（该列设置了不可移动）往右移动</a>
    </div>
    <table id="dg1"></table>
</div>

<script>
    $(function () {
        $("#a1").click(function () {
            $("#dg1").datagrid("deleteColumn", "Sex1");
        });

        $("#a2").click(function () {
            $("#dg1").datagrid("deleteColumn", "TS1");
        });

        $("#a3").click(function () {
            $("#dg1").datagrid("deleteColumn", "ID");
        });


        $("#a4").click(function () {
            var copts = $("#dg1").datagrid("popColumn", "TS3");
            alert(JSON.stringify(copts));
        });


        $("#a5").click(function () {
            $("#dg1").datagrid("moveColumn", { source: "TS4", target: "Sex2", point: "before" });
        });

        $("#a6").click(function () {
            $("#dg1").datagrid("moveColumn", { source: "TS4", target: "AreaName", point: "after" });
        });

        $("#a7").click(function () {
            $("#dg1").datagrid("shiftColumn", { field: "TS4", point: "before" });
        });

        $("#a8").click(function () {
            $("#dg1").datagrid("shiftColumn", { field: "TS4", point: "after" });
        });


        $("#a9").click(function () {
            $("#dg1").datagrid("freezeColumn", "TS4");
        });

        $("#a10").click(function () {
            $("#dg1").datagrid("unfreezeColumn", "TS4");
        });

        $("#a11").click(function () {
            $("#dg1").datagrid("shiftColumn", { field: "TS5", point: "after" });
        });

        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({ field: 'Sex1', title: '男', width: 90 });
            c1.push({ field: 'Sex2', title: '女', width: 90 });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 },
                { field: 'TS3', title: '测试3', width: 60 },
                { field: 'TS33', title: '测试33', width: 60, hidden: true },
                { field: 'TS4', title: '测试4', width: 60 },
                { field: 'TS5', title: '测试5', width: 160, movable: false },
                { field: 'TS6', title: '测试6', width: 160 },
                { field: 'TS7', title: '测试7', width: 160 },
                { field: 'TS8', title: '测试8', width: 160 },
                { field: 'TS9', title: '测试9', width: 160 }
            ];
            result.push(normal00000);

            return result;
        };
        var options = {
            title: "列表",
            idField: "ID",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: "#toolbar1",
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-common-data.json",
            onBeforeDeleteColumn: function (field) { if (field != "ID") { return true; } else { alert("列“ID”不可删除。"); return false; } },
            onDeleteColumn: function (field) { alert("删除列[field = " + field + "]成功。"); }
        };

        $("#dg1").datagrid(options);
    });
</script>